<template>
  <div
    :style="{
      display: 'grid',
      alignItems: 'start',
      gridColumnGap: info.gap + 'px',
      gridTemplateColumns: `repeat(${info.columns}, minmax(0, 1fr))`
    }"
  >
    <fall-row
      v-for="(columns, index) in dataColumns"
      :key="index"
      :gap="info.gap + 'px'"
    >
      <slot
        v-for="(column, index) in columns"
        :key="index"
        :src="column"
      ></slot>
    </fall-row>
  </div>
</template>

<script>
import FallRow from './FallRow.vue'
export default {
    data(){
        return{
            info:'',
            dataColumns:''
        }
    },
    props:{
        data:{
            type:Array,
            default:()=>[],
            require:true
        },
        config:{
            type:Object,
            default:{},
            require:true
        }
    },
    components:{
        FallRow
    },
    created(){
      this.info = useMediaValues(this.config)
      let chunks = createChunks(this.data, this.columns);
      this.dataColumns = createDataColumns(chunks, this.info.columns);
    },
}
</script>